<template>
  <div>
    <div>
      <el-button @click="handleAddClick()" type="primary" size="small">添加权限</el-button>
    </div>
    <el-table :data="actionList" v-loading="loading" style="width: 100%">
      <el-table-column prop="permission" label="权限字符串" width="180"></el-table-column>
      <el-table-column prop="permissionName" label="描述" min-width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEditClick(scope.row)" size="small" plain>编辑</el-button>
          <el-button type="danger" @click="handleRemoveClick(scope.row)" size="small" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination background layout="prev, pager, next" :total="pageInfo.total"></el-pagination>
    <el-dialog :title="!editing?'新建权限':'编辑权限'" :visible.sync="showEditDialog">
      <el-form ref="actionEditForm" :model="editAction" :rules="editActionRules">
        <el-form-item label="权限字符串" :label-width="formLabelWidth" prop="permission">
          <div class="text-input">
            <el-input v-model="editAction.permission" auto-complete="off"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="权限描述" :label-width="formLabelWidth" prop="permissionName">
          <div class="text-input">
            <el-input v-model="editAction.permissionName" auto-complete="off"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      actionList: [],
      loading: false,
      pageInfo: {
        page: 0,
        pageSize: 0,
        total: 0
      },
      showEditDialog: false,
      editing: true,
      formLabelWidth: '100px',
      editAction: {
        id: null,
        permission: '',
        permissionName: ''
      },
      editActionRules: {
        permission: [
          { required: true, message: '请输入权限字符串', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        permissionName: [
          { required: true, message: '请输入权限描述', trigger: 'blur' },
          { min: 2, max: 12, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    reloadActionList: function () {
      this.loading = true
      var postData = { page: this.pageInfo.page, pageSize: this.$config.PAGE_SIZE }
      this.$axios.post(this.$api.ACTION_PAGE.url, postData).then(response => {
        if (response.data.code === 0) {
          // 登录成功设置
          this.loading = false
          this.actionList = response.data.data.pageData
          this.pageInfo.total = response.data.data.total
        }
      })
    },
    clearEditActionForm: function () {
      this.editAction.id = null
      this.editAction.permission = ''
      this.editAction.permissionName = ''

      if (this.$refs.actionEditForm) {
        this.$refs.actionEditForm.resetFields()
      }
    },
    handleAddClick: function () {
      this.editing = false
      this.clearEditActionForm()
      this.showEditDialog = true
    },
    handleEditClick: function (action) {
      this.editing = true
      this.clearEditActionForm()
      this.editAction.id = action.id
      this.editAction.permission = action.permission
      this.editAction.permissionName = action.permissionName
      // 打开
      this.showEditDialog = true
    },
    handleRemoveClick: function (action) {
      var _this = this
      this.$bus.$emit('showYesNo', '系统信息', '您要删除该权限吗？', function () {
        var postData = { id: action.id }
        this.$axios.post(this.$api.ACTION_REMOVE.url, postData).then(response => {
          console.log('respone', response)
          if (response.data.code === 0) {
            console.log('锁定 / 解锁 成功')
            this.$message({
              message: '操作成功!',
              type: 'success'
            })
            _this.reloadActionList()
          }
        })
      })
    },
    dialogConfirm: function () {
      this.$refs['actionEditForm'].validate((valid) => {
        if (valid) {
          var url = this.editing ? this.$api.ACTION_UPDATE.url : this.$api.ACTION_ADD.url
          var postData = JSON.parse(JSON.stringify(this.editAction))
          console.log(url, postData)
          this.$axios.post(url, postData).then(response => {
            if (response.data.code === 0) {
              // 登录成功设置
              this.loading = false
              this.$message({
                message: '操作成功!',
                type: 'success'
              })
              this.showEditDialog = false
              this.reloadActionList()
            }
          }).catch((err) => {
            this.logining = false
            this.$message.error(err.message)
          })
        }
      })
    }
  },
  mounted: function () {
    this.reloadActionList()
  }
}
</script>
<style scoped>
.text-input{
  width:240px;
}
</style>
